<template>
	<view class="content">
		<view class="loadBox" v-show="!load">

-
			<view class="r_out animation-slide-bottom" :style="[{animationDelay:(0.5)+'s'}]">
				<view class="r_in">
					<view class="r_c c1" :style="{height:progress_load+'%'}">
						
					</view>
					<view class="r_num">
						   {{progress_load}}%
					</view>

				</view>
			</view>
		</view>
		<image class="imgBox" v-for="(item,index) in arr" :src="item.imgSrc" v-show="showImg==1000+index && load"
			:class="showImg==300?'animation-fade':''" mode="" @load="loadImg(index)"></image>


		<view class="foot">

			<button class="button_jump animation-slide-bottom" :style="[{animationDelay:(2)+'s'}]" @click="jump_to">
				跳过
			</button>
		</view>

	</view>
</template>
<script>
	export default {
		name:"FirstPage",
		data() {
			return {
				title: '正在加载中',
				arr: [],
				showImg: 1000,
				load: false,
				progress_load: 0,
				audio: uni.createInnerAudioContext(), //创建音频
				imgSrc: "../../static/2021321/1000.jpg",
			}
		},
		onLoad() {
			this.title = "加载完成";
			//this.load = true;
		},
		onReady() {
			this.audio.src = "../../static/1.mp3";
			for (let i = 1000; i <= 1449; i++) {
				let ar = [];
				ar.imgSrc = "../../static/1023/" + i + ".jpg";
				this.arr.push(ar);
			}

		},
		methods: {
			
             /**
			  * 图片资源的加载进度的监听
			  * @param {Object} index 加载图片的数量
			  */
			loadImg(index) {
				this.progress_load = parseInt((index / 449) * 100);
				console.log("INDEX"+index);
				if (index == 449) {
					this.load=true;
					this.loadDonghua();
				}

			},
			/**
			 * 加载动画效果
			 */
			loadDonghua() {
				this.playAudio();
				let model_TIMER = false;
				let speed = 30;
				let timer = setInterval(() => {
					if (this.showImg == 1448) {
						clearInterval(timer);
						return false;
					}
					this.showImg++;
				}, speed);

			},
			/**
			 * 播放音频
			 */
			playAudio() {
				console.log("播放音频");
				this.audio.play();
			},
			/**
			 * 跳过
			 * 进入首页
			 */
			jump_to(){
				
			}


		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.imgBox {
		width: 100vw;
		height: 100vh;

	}

	@keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	.animation-fade {
		animation-name: fade;
		animation-duration: .8s;
		animation-timing-function: linear
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.foot {
		width: 100vw;
		height: 100rpx;
		position: absolute;
		z-index: 999;
		bottom: 5vh;

	}

	.button_jump {
		width: 40%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 5vw;
		margin-top: 10rpx;
		background-color: red;
		border-radius: 10rpx;
		color: white;

	}

	button.action::after {
		border: 0;
	}

	.animation-slide-bottom {
		animation-name: slide-bottom
	}

	@keyframes slide-bottom {
		0% {
			opacity: 0;
			transform: translateY(100%)
		}

		100% {
			opacity: 1;
			transform: translateY(0)
		}
	}

	[class*=animation-] {
		animation-duration: .5s;
		animation-timing-function: ease-out;
		animation-fill-mode: both
	}

	.loadBox {
		width: 100%;
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.roundBox {
		width: 40vw;
		height: 40vw;
		border: 1px solid red;
		border-radius: 50%;
		line-height: 40vw;
		text-align: center;
		font-size: 5vw;
		color: red;
		font-weight: 600;
	}

	.r_out {
		width: 25vw;
		height: 25vw;
		border: 8rpx solid #d9d9d9;
		border-radius: 50%;
		background: #fff;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.r_in {
		width: 22vw;
		height: 22vw;

	

		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms_border-radius: 50%;
		overflow: hidden;
		position: relative;
	}
	.r_c {
	    width: 22vw;
	    height: 22vw;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    height: 0;
	}
	.c1 {
		
	    background: #fbad4c;
	}
	.r_num {
	    color: #404040;
	    font-size: 6vw;
	    display: flex;
		align-items: center;
		justify-content: center;
	    font-weight: bold;
	    position: absolute;
	    height: 22vw;
	    text-align: center;
	    width: 100%;
	}
</style>
